<template>
  <div class="com-year cleafix">
    <span 
      class='f-l avue-search__tags'
      :class='year==-1?"avue-search__tags--active":""'
      @click='onChangeYear(-1)'
    >全部</span>
    <el-tabs
      class='f-l'
      size='small'
    >
      <el-tab-pane
        v-for='(item,index) in tabs'
        :key='item.title'
        :label="item.title"
        :name="item.title"
      >
        <ul class=''>
          <span
            v-for='(child,idx) in item.children'
            :key='child.value'
            class='avue-search__tags'
            :class='child.value==year?"avue-search__tags--active":" "'
            @click.prevent.stop='onChangeYear(child.value)'
          >
            {{child.label}}
          </span>
        </ul>
      </el-tab-pane>
      
    </el-tabs>
  </div>
</template>

<script>
import {PROJECT_DIC} from '@/const/dict/';

export default {
  props: ['list'],
  data() {
    return {
      activeName: '',
      year: '',
    }
  },
  computed: {
    tabs() {
      const tabChild1 = PROJECT_DIC.YEAR.slice(0,5);
      const tabChild2 = PROJECT_DIC.YEAR.slice(5,10);
      const tabChild3 = PROJECT_DIC.YEAR.slice(10,15);
      return [
        {
          title: '十二五规划',
          children: tabChild1,
        },
        {
          title: '十三五规划',
          children: tabChild2,
        },
        {
          title: '十四五规划',
          children: tabChild3,
        },
      ]
    }
  },
  methods: {
    onChangeYear(y) {
      this.year=y;
      this.$emit("change", this.year);
    }
  }
}
</script>
<style lang="scss">
.com-year {
  .avue-search__tags {
    padding: 5px 10px;
  }
  .el-tabs__item {
    color: rgba(0,0,0,.65);
    font-size: 14px;
    line-height: 30px;
    height: 30px;
  }
  .el-tabs__item.is-active {

    color: #1890ff;
    background: transparent;
    // font-size: 14px;
    
  }
}

</style>